<template>
    <div>
        <div class="myCartGoods">
            <ul infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                <li>

                    <div class="singleCartGoods" v-for="(item,index) in goodsList" :key="index">
                        <div><img src="/_nuxt/img/noGoods.7e54b67.png" alt="" class="none noGoods"></div>
                        <div class="checkContent">
                            <input type="checkbox" class="checkbox" @click="cartStatus(index)"
                                :checked="item.isCheck?'checked':''">
                        </div>
                        <input disabled="disabled" type="checkbox" class="none"> <img
                            :src="'https://cdn.bestseller.com.cn'+item.gscMaincolPath" alt=""
                            style="width: 1.6rem; height: 2.5rem; margin: 0.1rem 0.2rem;">
                        <div class="myCartGoodsInfo">
                            <!-- v-for="(item,index) in goodsList" :key="index" -->
                            <div class="cartGoodsTitle">{{item.goodsName}}</div>
                            <!-- {{item.goodsName}} -->
                            <div class="cartGoodsCode">
                                {{item.gsColorCode}}
                                <span></span></div>
                            <div class="cartGoodsColor"><span class="colorNamesizeName">{{item.colorAlias}}
                                    175/80A/MR</span>
                                <span class="icon2wantBuy"></span></div>
                            <div class="cartGoodsCount">数量：{{item.productNum}}</div>
                            <!-- {{item.productNum}} -->
                        </div>
                        <div class="cartGoodsPrice">价格:￥{{item.discountPrice}}</div>
                        <div class="deleteMyGoods" @click="cartDel(index)"></div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- <div>
            <div class="LICK" style="width:100%;margin-bottom:2rem">
                <h3>— 你可能还喜欢 —</h3>
                <ul class="LICK_ul" style="width:100%;display:inline-block"></ul>
            </div>
        </div> -->
        <div class="myCartGoToPay borderTopCCC">
            <div class="chooseAllMyCart"><input type="checkbox" :checked="allInfo.allCheck?'checked':''"
                    @click="cartAllCheck(allInfo.allCheck)"> <span>全选</span></div>
            <div class="totalCounts">
                共:
                <span>{{allInfo.checkNum}}</span>
                件
            </div>
            <div class="totalCartMoney">
                <p>合计:<span>￥{{allInfo.checkPrice}}</span></p>
                <p>促销减:<span>￥0</span></p>
            </div>
            <div class="cartPay bgColorBlack" @click="fnToOrder()">购买结算</div>
        </div>
    </div>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        // 在computed使用状态机中的数据
        computed: {
            ...mapState({
                goodsList: state => state.cart.goodsList
            }),
            allInfo() {
                return this.$store.getters['cart/allInfo']
            }
        },
        methods: {
            ...mapMutations({
                cartDel: 'cart/cartDel',
                cartStatus: 'cart/cartStatus',
                cartAllCheck: 'cart/cartAllCheck',
            }),
            fnToOrder() {
                this.$router.push({
                    path: '/home/order'
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import url(../../assets/css/default.css);
    @import url(../../assets/css/address.css);
    @import url(../../assets/css/checkout.css);

    
</style>